<template>
  <div class="myBox">
    <div class="myTop">
      <img
        src="../../../images/fae98107-94c4-47d1-ab04-f3e21ba7d864.png"
        alt=""
        @click="goBackMy"
      />
      <b>被采纳建议</b>
    </div>
    <div>
      <div class="fatherbox">
        <div class="left">
          <img
            src="https://n.sinaimg.cn/sinacn20121/131/w435h496/20190216/d6f7-htacqwv8943351.jpg"
            alt=""
            class="left-img"
          />
          <p class="text-name">武帅江</p>
        </div>
        <div class="right">
          <p>痔疮得治疗路程</p>
          <p class="text-dialog">主要症状:一圈痔疮</p>
          <p class="text-dialog">采纳时间:2024.8.20</p>
        </div>
      </div>
      <div class="btn">
        <p class="text-title">我的建议</p>
        <div class="text-container">
          <p class="truncate-text">
            痔疮的常见症状包括： 疼痛和不适: 尤其在排便时或坐着时加重。 出血:
            排便时可能会出现鲜红色血液。 肿块或肿胀: 直肠或肛门周围有肿块。 瘙痒和刺激感:
            尤其在肛门周围。 黏液分泌: 从肛门分泌异常的黏液。
          </p>
        </div>
      </div>
    </div>
    <div>
      <div class="fatherbox">
        <div class="left">
          <img
            src="https://n.sinaimg.cn/sinacn20121/131/w435h496/20190216/d6f7-htacqwv8943351.jpg"
            alt=""
            class="left-img"
          />
          <p class="text-name">王晓磊</p>
        </div>
        <div class="right">
          <p>深喉疼的治疗路程</p>
          <p class="text-dialog">主要症状:刺激物，感染</p>
          <p class="text-dialog">采纳时间:2024.8.20</p>
        </div>
      </div>
      <div class="btn">
        <p class="text-title">我的建议</p>
        <div class="text-container">
          <p class="truncate-text">
            痔疮的常见症状包括： 喉咙痛或灼热感: 喉咙部位感到疼痛、灼热或刺痛。 吞咽困难:
            吞咽食物或饮水时感到疼痛或不适。 喉咙干燥: 喉咙感觉干燥、发痒或有异物感。
            声音沙哑: 说话时声音变得沙哑或嘶哑。 咳嗽: 伴随有干咳或带痰的咳嗽。
            发红或肿胀: 喉咙或扁桃体部位发红、肿胀。 发烧: 有时喉咙疼痛伴随发烧。 耳痛:
            喉咙疼痛有时可能放射到耳朵，造成耳部不适。
            这些症状可以由不同的原因引起，例如感染（如病毒性或细菌性咽炎）、过敏、刺激物暴露或胃酸反流等。如果喉咙疼痛持续时间较长或症状严重，建议寻求医疗帮助。
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";

const router = useRouter();
const goBackMy = () => {
  router.go(-1);
};
</script>

<style scoped>
.myBox {
  width: 100%;
  height: 100%;
}

.myTop {
  width: 95%;
  height: 50px;
  display: flex;
  align-items: center;
  margin-left: 20px;
}
.myTop b {
  font-size: 20px;
  padding-left: 40px;
}

.el-icon-back {
  font-size: 25px;
}

.icon-button {
  background: none;
  border: none;
  cursor: pointer;
}

.icon-button img {
  width: 24px;
  height: 24px;
}
.fatherbox {
  width: 100%;
  height: 120px;
  display: flex;
}
.left {
  width: 20%;
  height: 100%;
  margin-left: 10px;

  margin-top: 20px;
  /* background-color: red; */
}
.right {
  width: 80%;
  height: 100%;
  margin-left: 20px;
  /* background-color: yellow; */
}
.text-container {
  width: 100%; /* 设置容器宽度 */
}

.truncate-text {
  display: -webkit-box;
  padding: 0 20px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 显示的行数 */
  overflow: hidden;
  text-overflow: ellipsis;
  text-indent: 2em;
}
.text-title {
  border-top: 1px solid #ccc;
  padding-top: 20px;
  text-indent: 2em;
}
.left-img {
  width: 40%;
  margin-left: 30%;
  margin-top: 10%;
  border-radius: 50% 50% 50% 50%;
}
.text-name {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
}
.text-dialog {
  font-size: 14px;
}
.btn {
  width: 100%;
  height: auto;
}
</style>
